<template>
  <div class="app-container" >
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <h1>本省企业数量统计:</h1>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="CITY" label="市" width="180">
            </el-table-column>
            <el-table-column prop="CNT" label="企业数量" width="180">
            </el-table-column>
            <el-table-column prop="CNT1" label="符合资质要求">
            </el-table-column>
            <el-table-column prop="CNT2" label="无注册人员"> </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card >
          <div id="container" style="height: 390px; weight: 100%"></div>
          <div id="bing" style="height: 390px; weight: 100%"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getZzStatistics, getOrgScoreSts } from "@/api/qyxy/sts";
export default {
  name: "STS",
  created() {
    getZzStatistics().then((res) => {
      this.tableData = res;
    });
  },
  mounted() {
    getOrgScoreSts().then((res) => {
      this.orgScore = res;
      this.initData();
      this.initBingData();
      this.draw();
    });
  },
  data() {
    return {
      tableData: [],
      orgScore: [],
      xData: [],
      yData: [],
      bingData:[],
    };
  },
  methods: {
    initData() {
      this.orgScore.forEach((item) => {
        this.xData.push(item.SCORE);
        this.yData.push(item.COUNT);
      });
      console.log(this.xData);
    },
    initBingData(){
      this.orgScore.forEach((item) => {
        let bing = {value:item.COUNT,name:item.SCORE + '分'};
        this.bingData.push(bing);
      });
    },
    draw() {
      let myChart = this.$echarts.init(document.getElementById("container"));

      myChart.setOption({
        // color:['red','yellow'],
        title: {
          text: "本省得分统计:",
          left: "center",
          top: "top",
          textStyle: {
            fontSize: 30,
          },
          subtextStyle: {
            fontSize: 20,
          },
        },
    
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {},
        xAxis: [
          {
            name: "得分",
            type: "category",
            data: this.xData,
          },
        ],
        yAxis: [
          {
            name: "企业数",
            type: "value",
          },
        ],
        series: [
          {
            name: "企业数",
            type: "bar",
            barWidth: "60%",
            data: this.yData,
             color: "#66CCFF",
          },
          {
            name: "企业数",
            label: {
              show: true,
              position: "top",
            },
            type: "line",
             color: "#0099CC",
            data: this.yData,
          },
        ],
      });
      let bing = this.$echarts.init(document.getElementById("bing"));
      bing.setOption({
        
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "企业得分",
            type: "pie",
            radius: "50%",
            data: this.bingData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>